﻿<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="~/Content/css/framework-font.css" rel="stylesheet" />
    <link href="~/Content/css/framework-ui.css" rel="stylesheet" />
    <script src="~/Content/js/jquery/jquery-2.1.1.min.js"></script>
    <link href="~/Content/css/framework-theme.css" rel="stylesheet" />
    <link href="~/Content/js/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/css/framework-theme.css" rel="stylesheet" />
    <script src="~/Content/js/echarts/echarts.min.js"></script>
    <script>
        var kwchart;
        var kwhpie;
        var prbar;

        $(function () {
            kwchart = echarts.init(document.getElementById('kwchart'));
            kwhpie = echarts.init(document.getElementById('kwhpie'));
            prbar = echarts.init(document.getElementById('prbar'));
            Init();

            //1 总电量
            //2 各站点实时功率曲线
            //3 能耗分布（各站点 应付 应收 电量显示） 对比条图
            //4 电量环比（各站点 汇总电量环比）

            //5 单相表和三相表数据
            //分别显示 峰值电流 峰值电压 峰值功率 当日总电量 同比上一天的电量
            //GetStationKW(); //获取各站点的实时功率
            //GetLeaveChart();
        });

        function Init() {
            $.ajax({
                url: "/Home/GetDefaultData",
                dataType: "json",
                async: true,
                success: function (data) {
                    if (data && data.length >=4) {

                        //总电量
                        if (data[0]) {
                            $('#Today_kWh').text(data[0].Today_kWh + ' kWh');
                            $('#Total_kWh').text(data[0].Total_kWh + ' kWh');
                            $('#Break_Devices').text(data[0].Break_Devices + ' 个'); 
                        }
                        //当日实时功率
                        if (data[1]) {
                            // alert(JSON.stringify(data[1]));
                            GetKwChart(data[1]);
                        }
                        //电量环比
                        if (data[2]) {
                            GetPie(data[2]);
                        }
                        //电量分布
                        if (data[3]) {
                            GetPRBar(data[3]);
                        }
                         
                        //表格信息
                        if (data[4] && data[4].length > 0)
                        { 
                           
                            var body = document.getElementById("gridBody");
                         
                            for (var i = 0; i < data[4].length; i++) {
                                var row = data[4][i]; 

                                var tr = document.createElement("tr");//创建一行 
                                var td = tr.insertCell();//创建一个单元  
                                td.class = "text-success";
                                td.style = "text-align: center;font-weight:bold;";
                                td.innerHTML = row.OrgName; 

                             

                                var td2 = tr.insertCell();//创建一个单元   
                                td2.innerHTML = row.Port; 

                                var td3 = tr.insertCell();//创建一个单元   
                                td3.innerHTML = row.Add485; 

                                var td1 = tr.insertCell();//创建一个单元   
                                td1.innerHTML = row.DevcieType; 

                                var td4 = tr.insertCell();//创建一个单元   
                                td4.innerHTML = row.kW_Total; 


                                var td5 = tr.insertCell();//创建一个单元   
                                td5.innerHTML = row.kVA_Total; 

                                var td6 = tr.insertCell();//创建一个单元   
                                td6.innerHTML = row.kVar_Total; 

                                var td7 = tr.insertCell();//创建一个单元   
                                td7.innerHTML = row.PF_Total; 

                                var td8 = tr.insertCell();//创建一个单元   
                                td8.innerHTML = row.Hz; 


                                var td9 = tr.insertCell();//创建一个单元  
                                td9.class = "text-success";
                                td9.style = "text-align: center;font-weight:bold;";
                                td9.innerHTML = row.Today_kWh; 
 
                                var td10 = tr.insertCell();//创建一个单元  
                                td10.class = "text-success";
                                td10.style = "text-align: center;font-weight:bold;";
                                td10.innerHTML = row.Total_Kwh; 
 
                                body.appendChild(tr); 
                            }
                            $('#grid').show();

                        }
                        else
                        { 
                            $('#grid').hide();
                        }
                    }

                }
            });
            //ajax
            //GetDefaultData
        }
        function GetKwChart(input) {

            var optionline = {
                toolbox: {
                    feature: {
                        dataView: { show: true, readOnly: false },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                //tooltip: {
                //    trigger: 'axis',
                //    type: 'cross',
                //    formatter: "{a} <br/>{b}: {c} kW"
                //},

                legend: {
                    data: input.legend// ['站点1']
                },
                grid: {
                    top: 70,
                    bottom: 50
                },
                xAxis: [{
                    name: '时间',
                    type: 'category',
                    data: input.xAxis
                }],
                yAxis: [{
                    name: '千瓦(kW)',
                    type: 'value'
                }],
                series: input.series

            };

            kwchart.setOption(optionline);

        }
        function GetPie(input) {

            var optionpie = {
                //title: {
                //    text: '电量分布',
                //    subtext: '实时',
                //    x: 'center'
                //},
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} kWh({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: input.legend// ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                },
                series:
                [
                    {
                        name: '电量分布',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: input.seriesData,
                        //[
                        //    { value: 335, name: '直接访问' },
                        //    { value: 310, name: '邮件营销' },
                        //    { value: 234, name: '联盟广告' },
                        //    { value: 135, name: '视频广告' },
                        //    { value: 1548, name: '搜索引擎' }
                        //],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            kwhpie.setOption(optionpie);
        }
        function GetPRBar(input) {
            var optionpr = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    data: ['利润', '支出', '收入']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                yAxis: [
                    {
                        name: '千瓦(kW)',
                        type: 'value'
                    }
                ],
                xAxis: [
                    {
                        name: '站点',
                        type: 'category',
                        axisTick: { show: false },
                        data: input.xAxis// ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                    }
                ],
                series: [
                    {
                        name: '利润',
                        type: 'bar',
                        label: {
                            normal: {
                                show: true,
                                position: 'inside'
                            }
                        },
                        data: input.data1//[200, 170, 240, 244, 200, 220, 210]
                    },
                    {
                        name: '收入',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            normal: {
                                show: true
                            }
                        },
                        data: input.data2// [320, 302, 341, 374, 390, 450, 420]
                    },
                    {
                        name: '支出',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            normal: {
                                show: true,
                                position: 'left'
                            }
                        },
                        data: input.data3// [-120, -132, -101, -134, -190, -230, -210]
                    }
                ]
            };
            prbar.setOption(optionpr);
        }
    </script>
</head> 
<body class="table-responsive">
    <div id="areascontent">

        <div class="rows" style="margin-bottom: 1%; border: 1px solid #e6e6e6; overflow: hidden; padding-left: 1px;">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <i class="fa fa-bar-chart fa-lg" style="padding-right: 5px;"></i>关键指标
                    <div style="float: right; position: relative; top: -4px; right: 0px;">
                        <iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=1" width="330" height="35" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
                    </div>
                </div>
                <div class="panel-body">

                    <div class="dashboard-stats">
                        <div class="dashboard-stats-item" style="background-color: #65cea7;">
                            <h3 id="Total_kWh" class="m-top-none">0 kWh</h3>
                            <h5>累计电量</h5>
                        </div>
                    </div>
                    <div class="dashboard-stats">
                        <div class="dashboard-stats-item" style="background-color: #65cea7;">
                            <h3 id="Today_kWh" class="m-top-none">0 kWh</h3>
                            <h5>当日电量</h5>

                        </div>
                    </div>
                    <div class="dashboard-stats">
                        <div class="dashboard-stats-item" style="background-color: #fc8675; margin-right: 0px;">
                            <h3 id="Break_Devices" class="m-top-none">0 个</h3>
                            <h5>断连设备</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="rows" style="margin-bottom: 1%; overflow: hidden;">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <i class="fa fa-line-chart fa-lg" style="padding-right: 5px;"></i>电量分布
                </div>
                <div class="panel-body">
                    <div class="panel-body" style="padding-bottom: 0px;">
                        <div id="kwchart" style="height: 285px;width: 100%; padding-right: 10px;">
                        </div>
                    </div>
                </div>
            </div>
            <div class="rows" style="margin-bottom: 1%; overflow: hidden;">
                <div style="float: left; width: 69%;">
                    <div style="height: 350px; border: 1px solid #e6e6e6; background-color: #fff;">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <i class="fa fa-area-chart fa-lg" style="padding-right: 5px;"></i>能耗分布
                                
                            </div>
                            <div class="panel-body" style="padding-bottom: 0px;">
                                <div id="prbar" style="height: 285px;width: 100%; padding-right: 10px;">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="float: right; width: 30%;">
                    <div style="height: 350px; border: 1px solid #e6e6e6; background-color: #fff;">
                        <div class="panel panel-default">
                            <div class="panel-heading"><i class="fa fa-pie-chart fa-lg" style="padding-right: 5px;"></i>电量环比</div>
                            <div class="panel-body" style="padding-top: 20px;">
                                @*饼图*@
                                <div id="kwhpie" style="height: 285px;width: 100%; padding-right: 10px;">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="grid" class="rows" style="overflow: hidden;">
                <div>
                    <div style=" border: 1px solid #e6e6e6; background-color: #fff;">
                        <div class="panel panel-default">
                            <div class="panel-heading"><a href="#"><i class="fa fa-list fa-lg" style="padding-right: 5px;"></i>当日统计</a></div>
                            <div class="panel-body">
                                <table   class="table table-bordered table-hover">
                                    @*德利晶源总部	b5fa9e5a-1160-49eb-a320-7def861dbcc2	光伏	单相表	应收	8088	1	0.015	0.015	0	1	50.06	288.97	288.97*@
                                    <thead style="font-weight:bold;"> 
                                        <tr >
                                            <td style="text-align: center;width:250px;vertical-align:middle;" >站点</td>
                                           
                                            <td>端口</td>
                                            <td>表号</td>
                                            <td>类型</td>
                                            <td>功率(kW)</td>
                                            <td>千伏安(kVA)</td>
                                            <td>千乏(kVar)</td>
                                            <td>功率因数</td>
                                            <td>频率(Hz)</td>
                                          
                                            <td class="text-success" style="text-align: center;vertical-align:middle;"  >当日电量(kWh)</td>
                                            <td class="text-success" style="text-align: center;vertical-align:middle;"  >总电量(kWh)</td>
                                        </tr>
                                       
                                    </thead>
                                    <tbody id="gridBody">
                                      
                                    </tbody>

                                </table>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <style>
            #copyrightcontent {
                height: 30px;
                line-height: 29px;
                overflow: hidden;
                position: absolute;
                top: 100%;
                margin-top: -30px;
                width: 100%;
                background-color: #fff;
                border: 1px solid #e6e6e6;
                padding-left: 10px;
                padding-right: 10px;
            }

            .dashboard-stats {
                float: left;
                width: 20%;
            }

            .dashboard-stats-item {
                position: relative;
                overflow: hidden;
                color: #fff;
                cursor: pointer;
                height: 105px;
                margin-right: 25px;
                margin-bottom: 10px;
                padding: 20px 20px;
            }

                .dashboard-stats-item .m-top-none {
                    margin-top: 2px;
                }

                .dashboard-stats-item h2 {
                    font-size: 35px;
                    font-family: inherit;
                    line-height: 1.1;
                    font-weight: 500;
                }

                .dashboard-stats-item h5 {
                    font-size: 14px;
                    font-family: inherit;
                    margin-top: 3px;
                    line-height: 1.1;
                }


                .dashboard-stats-item .stat-icon {
                    position: absolute;
                    top: 10px;
                    right: 10px;
                    font-size: 30px;
                    opacity: .3;
                }

            .dashboard-stats i.fa.stats-icon {
                width: 50px;
                padding: 20px;
                font-size: 50px;
                text-align: center;
                color: #fff;
                height: 50px;
                border-radius: 10px;
            }

            .panel-default {
                border: none;
                border-radius: 0px;
                margin-bottom: 0px;
                box-shadow: none;
                -webkit-box-shadow: none;
            }

                .panel-default > .panel-heading {
                    color: #777;
                    background-color: #fff;
                    border-color: #e6e6e6;
                    padding: 10px 10px;
                }

                .panel-default > .panel-body {
                    padding: 10px;
                    padding-bottom: 0px;
                }

                    .panel-default > .panel-body ul {
                        overflow: hidden;
                        padding: 0;
                        margin: 0px;
                        margin-top: -5px;
                    }

                        .panel-default > .panel-body ul li {
                            line-height: 27px;
                            list-style-type: none;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }

                            .panel-default > .panel-body ul li .time {
                                color: #a1a1a1;
                                float: right;
                                padding-right: 5px;
                            }
        </style>
</body>
</html>
